<template>
  <div class="line-wrapper" :style="styles">
    <div class="line"></div>
    <span><slot></slot></span>
  </div>
</template>

<script>
export default {
  name: 'VLine',
  props: {
    marginTop: {
      type: String,
      required: false,
      default: '5px'
    },
    marginBottom: {
      type: String,
      required: false,
      default: '5px'
    },
    color: {
      type: String,
      required: false,
      default: '#c1c1c1'
    }
  },
  computed: {
    styles() {
      return {
        marginTop: this.marginTop,
        marginBottom: this.marginBottom,
        color: this.color
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.line-wrapper {
  text-align: center;
  .line {
    border-top: 1px solid;
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
      transform: scaleY(0.7)
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
      transform: scaleY(0.5)
    }
  }
  span {
    $fontSize: 16px;
    position: relative;
    top: -$fontSize/2;
    font-size: $fontSize;
    line-height: $fontSize;
    background-color: #fafafa;
    padding: 0 10px;
  }
}

</style>
